<template>
<!-- 这是共用的项目案例介绍 -->
  <div id="imgText">
    <div class="case">
      <ul>
        <router-link :to='data.to' v-for="(data, index) in imglist" :key="index">
            <li :style="{background:'url('+data.img+') center center / cover no-repeat'}">
              <h4>{{data.title}}</h4>
            </li>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    caseValue: {
      type: String,
    }
  
  },
  data () {
    return {
      imglist: [],
      // 建材
      material0: [
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区0', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      material1: [
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区1', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      material2: [
        {img: 'http://47.112.6.89/public/upload/projects/82c6a9ceb492493d2b7c5c8904f01888.jpg', title: '广州泷悦示范区2', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      material3: [
        {img: 'http://47.112.6.89/public/upload/projects/394002821bbfd0f70ddbc8bcdb35ede9.jpg', title: '广州泷悦示范区3', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      material4: [
        {img: 'http://47.112.6.89/public/upload/projects/8e6812f71abd03247d844836efeb2f58.jpg', title: '广州泷悦示范区4', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      material5: [
        {img: 'http://47.112.6.89/public/upload/projects/c000575c7e175accabca75f20ebf8e88.jpg', title: '广州泷悦示范区5', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      // 建材结束

      // 家具
      furniture0: [
        {img: 'http://47.112.6.89/public/upload/projects/9c6442db1dfb80f66173c958602ae1b2.jpg', title: '番禺李小姐宅邸00家具', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      furniture1: [
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '番禺李小姐宅邸00家具2', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      // 家具结束

      // 设计师
      designer0: [
        {img: 'http://47.112.6.89/public/upload/projects/ad492134b3d4da6f599b362ee07c75bb.jpg', title: '蜂巢系列00设计师', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      designer1: [
        {img: 'http://47.112.6.89/public/upload/projects/ad492134b3d4da6f599b362ee07c75bb.jpg', title: '蜂巢系列00设计师2', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      // 设计师结束

      // 施工团队
      construction0: [
        {img: 'http://47.112.6.89/public/upload/projects/306f9f4d96d6f6c288dc2d1f2dfcba2c.jpg', title: '佛山某售楼部00施工团队', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      construction1: [
        {img: 'http://47.112.6.89/public/upload/projects/306f9f4d96d6f6c288dc2d1f2dfcba2c.jpg', title: '佛山某售楼部00施工团队2', to:'/details'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/ff227befd9fdb3c5241e37fab9a95f62.jpg', title: '广州泷悦示范区', to:'/'},
        {img: 'http://47.112.6.89/public/upload/projects/a14ac0b8855b8c780b72136529697960.jpg', title: '筠州小镇花园商业体', to:'/'},
      ],
      // 施工团队结束
      
    }
  },
  watch: {
    caseValue(data) {
      var _this = this;
      if(data == 'material0') {
        _this.imglist = _this.material0;
      }else if(data == 'material1') {
        _this.imglist = _this.material1;
      } else if(data == 'material2') {
        _this.imglist = _this.material2;
      } else if(data == 'material3') {
        _this.imglist = _this.material3;
      } else if(data == 'material4') {
        _this.imglist = _this.material4;
      } else if(data == 'material5') {
        _this.imglist = _this.material5;
      } else if(data == 'furniture0') {
        _this.imglist = _this.furniture0;
      } else if(data == 'furniture1') {
        _this.imglist = _this.furniture1;
      } else if(data == 'designer0') {
        _this.imglist = _this.designer0;
      } else if(data == 'designer1') {
        _this.imglist = _this.designer1;
      } else if(data == 'construction0') {
        _this.imglist = _this.construction0;
      } else if(data == 'construction1') {
        _this.imglist = _this.construction1;
      }
    }
  },
  created () {
    // console.log(this.caseValue);
    // console.log(123)
    // this.imglist = this.case1;
    // let id = this.$router.query.id;
    // console.log(id)
  },
  mounted () {
    var _this = this;
    if (_this.caseValue == 'material0') {
      _this.imglist = _this.material0;
    } else if(_this.caseValue == 'furniture0') {
      _this.imglist = _this.furniture0;
    } else if(_this.caseValue == 'designer0') {
      _this.imglist = _this.designer0;
    } else if(_this.caseValue == 'construction0') {
      _this.imglist = _this.construction0;
    }
  },
}
</script>

<style lang="less" scoped>
.case {
  ul {
    font-size: 14px;
    a {
      display: block;
      margin: 5px 0px;
      height: 224px;
      width: 100%;
      color: white;
      li {
        height: 100%;
        h4 {
          letter-spacing: 1px;
          padding-top: 10px;
          margin-left: 15px;
          font-weight: normal;
          color: white;
        }
      }
      li:hover h4 {
        color: #333;
      }
    }
  }
}
a:visited { 
  color: white; 
  text-decoration:none; 
} 
</style>